/**
 * @intro:  全局公用指令.
 * @author: liyang.
 * @email: 1184785075@qq.com.
 * @Date: 2019/7/26 10:32.
 * @Copyright(©) 2019 by liyang.
 *
 */

;(function(){
  const getReference = (el, binding, vnode) => {
    const elWidth = vnode.elm.offsetWidth
    const elHeight = vnode.elm.offsetHeight
    const left = getElementLeft(el)
    const top = getElementTop(el)
    const _ref = binding.expression ? binding.value : binding.arg;
    const popoverEle = vnode.context.$refs[_ref].$refs['hl-popover'];

    console.log(popoverEle)
    const placement = vnode.context.$refs[_ref].placement
    const trigger = vnode.context.$refs[_ref].trigger
    const popoverWidth = popoverEle.offsetWidth

    const popoverHeight = popoverEle.offsetHeight

    const position = getPosition({'width':elWidth,'height':elHeight,'left':left,'top':top} , {'width':popoverWidth , 'height':popoverHeight } , placement )

    function setPosition(e){
      // 设置定位
      if (popoverEle) {
        popoverEle.style.left = position.left + 'px'
        popoverEle.style.top = position.top + 'px'
      }
    }

    if(trigger == 'hover'){
      el.addEventListener('mouseenter', setPosition)
      // popoverEle.addEventListener('mouseenter', setPosition)
    }

  };

  /**
   * 由一固定元素获取另一相对此固定元素的全局定位坐标
   * @param  {object}  { width:100 , height:100 , left: 100 , top: 200 }  固定元素信息
   * @param  {object}  { width:100 , height:100 }  相对元素信息
   * @param  {string}  'top'  相对元素相对固定元素的方位
   * @return {string}
   */
  function getPosition(ele1,ele2,placement){
    const gw = ele1.width,
          gh = ele1.height,
          gl = ele1.left,
          gt = ele1.top,
          xw = ele2.width,
          xh = ele2.height,
          margin = 10;
          gasket = 0;

    let xl = null,xt = null;

    switch (placement) {
      case 'top':
        xl = gl - (xw - gw) / 2
        xt = gt - xh - margin - gasket
        break;
      case 'right':
        xl = gl + gw
        xt = gt - (xh - gh) / 2 - gasket
        break;
      case 'bottom':
        xl = gl - (xw - gw) / 2
        xt = gt + gh - gasket
        break;
      case 'left':
        xl = gl - xw - margin
        xt = gt - (xh - gh) / 2 - gasket
        break;
      default:

    }

    return {
      'left':xl,
      'top':xt
    }
  }

  function getElementLeft(element) {　　　　
    var actualLeft = element.offsetLeft;　　　　
    var current = element.offsetParent;
  　　　　
    while (current !== null) {　　　　　　
      actualLeft += current.offsetLeft;　　　　　　
      current = current.offsetParent;　　　　
    }
    　　　　
    return actualLeft;　　
  }
  　　
  function getElementTop(element) {　　　　
    var actualTop = element.offsetTop;　　　　
    var current = element.offsetParent;
  　　　　
    while (current !== null) {　　　　　　
      actualTop += current.offsetTop;　　　　　　
      current = current.offsetParent;　　　　
    }
    　　　　
    return actualTop;　　
  }

  Vue.directive('popover', {
    // bind(el, binding, vnode) {
    //   getReference(el, binding, vnode)
    // },
    inserted(el, binding, vnode) {
      getReference(el, binding, vnode)
    }
  })
}())
